<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>门票详情</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../../css/utils/mui.min.css" />
	<link rel="stylesheet" href="../../css/utils/toastr.min.css" />
	<title></title>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 14px;
			background-color: #fff;
			background-color: #f2f3f4;
		}
		.content {
			padding: 10px;
			margin-bottom: 70px;
		}
		.tickets {
			width: 100%;
			height: 100%;
		}
		.bottom {
	        position: fixed;
		    left: 14px;
		    bottom: 20px;
		    width: 100%;
		    padding: 5px;
		}
		.activity-detail {
			padding: 15px;
			padding-top: 10px;
			background-color: #FFFFFF;
			border-radius: 5px;
		}
		.bottom-font-div {
			font-size: 12px;
			color: #666666;
		}
		.preview-activity-title {
			font-size: 16px;
			color: #333333;
		}
		.preview-activity-detail {
			font-size: 14px;
			color: #333333;
		}
		.preview-activity-tips {
			color: #FFFFFF;
			font-size: 13px;
			overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		}
		.tickets-detail {
			margin-top: 15px;
		}
		.preview-ticket-price {
			font-size: 16px;
			border-radius: 10px;
			background-color: #e3e4e5;
			padding: 5px 10px;
			float: left;
		}
		.preview-ticket-img {
			width: 100%;
			height: 180px;
		}
		.tickets-item {
			margin-top: 15px;
			padding-bottom: 40px;
			position: relative;
			background-color: #FFFFFF;
		}
		.line-div {
			margin-left: 3%;
			margin-top: 15px;
			margin-bottom: 15px;
			width: 94%;
			height: 1px;
			background-color: #F3F3F3;
		}
		.shadow-layer {
			width: 100%;
			height: 180px;
			position: absolute;
			top: 0px;
			left: 0px;
			padding-left: 10px;
			padding-right: 10px;
			background-image: url(../../img/myExtension/ticket_bg.png);
			background-size: 100% 100%;
		}
		.preview-ticket-num {
			font-size: 14px;
			color: #B9B9B9;
			float: right;
			padding: 5px 10px;
		}
		.preview-ticket-index {
			color: #FFFFFF;
			font-size: 15px;
			margin-top: 100px;
		}
		.ticket-bottom {
			margin: 5px 10px 10px 10px;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="tickets" id="previewForm">
			<div class="activity-detail" id="previewContent">
                <p id="theme" class="preview-activity-title"></p>
                <div class="line-div"></div>
                <p id="activityDate" class="preview-activity-detail"></p>
                <p id="activityAddr" class="preview-activity-detail"></p>
                <p id="attention" class="preview-activity-detail"></p>
                <div class="line-div"></div>
              	<div id="organizer" class="bottom-font-div"></div>
              	<div id="contractor" class="bottom-font-div"></div>
          	</div>
          	<div class="tickets-detail">
          		<!--<div class="tickets-item">
          			<p class="preview-ticket-price"></p>
	          		<img class="preview-ticket-img" src="../../img/myExtension/upload_img.png" />
	          		<label class="preview-activity-tips"></label>
	          		<p class="preview-ticket-price"></p>
	          		<p class="preview-ticket-price"></p>
          		</div>-->
          	</div>
		</div>
	</div>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/regular.js" ></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script>
		var openID = base.getParameter("openID");
		var activityID = base.getParameter("activityID");
		var theme = base.getParameter("theme");
		var attention = base.getParameter("attention");
		var organizer = base.getParameter("organizer");
		var contractor = base.getParameter("contractor");
		var activityDate = base.getParameter("activityDate");
		var activityAddr = base.getParameter("activityAddr");
		$(function(){
			var url = base.url.showMyTickets;
			var params = {
				openID: openID,
				activityID: activityID
			};
			base.postData(url,params,getshowMyTicketsData);
		});
		function getshowMyTicketsData(data) {
			if (data.success) {
				$("#theme").text(theme);
				$("#activityDate").text(activityDate);
				$("#activityAddr").text(activityAddr);
				$("#attention").text("注意事项："+attention);
				$("#contractor").text("承办方："+contractor);
				$("#organizer").text("主办单位："+organizer);
				$(".tickets-detail").html(getTicketHtml(data.context.userTicketList));
			}
		}
		function getTicketHtml (list) {
			var html = '';
			for (var index in list) {
				html += '<div class="tickets-item">'
				html += '	<img class="preview-ticket-img" src="'+list[index].img+'" />'
//				html += '	<div class="shadow-layer">'
//				html += '		<p class="preview-ticket-index">门票'+(index*1+1)+'</p>'
//				html += '		<p class="preview-activity-tips">摘要：'+list[index].ticketsExplain+'</p>'
//				html += '	</div>'
				html += '	<div class="ticket-bottom">'
				if (list[index].isCheckTickets==1) {
					html += '	<label class="preview-ticket-price">已检票</label>'
					html += '	<label class="preview-ticket-num">转发'+list[index].transpondNumber+'次可免费领票</label>'
				} else {
					if (list[index].price>0) {
//						html += '	<label class="preview-ticket-price">价格:'+(list[index].price>0?list[index].price:"免费")+'</label>'
					} else {
//						html += '	<label class="preview-ticket-price">价格:'+(list[index].price>0?list[index].price:"免费")+'</label>'
						html += '	<label class="preview-ticket-num">转发'+list[index].transpondNumber+'次可免费领票</label>'
					}
				}
				html += '	</div>'
				html += '</div>'
			}
			return html;
		}
	</script>
</body>
</html>
